<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/libs/http_cdn.jsdelivr.net_npm_bootstrap@4.6.2_dist_css_bootstrap.css"
          crossorigin="anonymous">
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/libs/axios.js"></script>
    <script src="/js/libs/vue.js"></script>
    <script src="/js/libs/jq3.6.js"></script>

    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/popper1.14.1.min.js"></script>
    <title>QQ代挂-管理</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light tm-0">
    <a class="navbar-brand" href="/">
        <img style="opacity: 0.86;max-width: 50px; border-radius: 999px"
             class="navbar-brand" src="/icon" alt="qq"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/">QQ代挂 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://kloping.top/">kloping's</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">更多功能;敬请期待.</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <a class="dropdown-item" target="_blank" href="https://github.com/gdpl2112/dg-bot">
                <img style="opacity: 0.86;max-width: 35px" alt="github" loading="lazy"
                     src="https://s.nmxc.ltd/sakurairo_vision/@2.6/display_icon/sora/github.png">
                github 开源地址
            </a>
        </form>
    </div>
</nav>
<br>
<!--======================================================================-->
<br>
<div class="container">
    <div class="row justify-content-md-center">
        <div class="col">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <button id="b1" class="nav-link active">管理者列表</button>
                </li>
                <li class="nav-item">
                    <button id="b2" class="nav-link">群列表开关</button>
                </li>
            </ul>
            <div>
                <br>
                <div id="m-div">
                    <ul id="m-div-ul" class="list-group">
                        <li class="list-group-item ist-group-item-action">
                            <small class="form-text text-muted">此管理 可进行复述,开/关 回复,监听 添加/删除 回复</small>
                            <div class="d-flex w-100 justify-content-between">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">请输入QQ:</span>
                                    </div>
                                    <input id="m_add_i" type="text" class="form-control" aria-label="Sizing example input"
                                           aria-describedby="inputGroup-sizing-default">
                                    <button v-on:click="madd()" type="button" class="btn btn-primary">添加一个</button>
                                </div>
                            </div>
                        </li>
                        <li v-for="(e,i) in list"
                            class="list-group-item d-flex justify-content-between align-items-center">
                            <img :src="'https://q1.qlogo.cn/g?b=qq&nk='+e.targetId+'&s=640'" style="width: 45px"
                                 class=" img-thumbnail rounded float-left">
                            {{e.targetId}}
                            <span class="badge badge-pill">
                                <button v-on:click="del(e.targetId)" type="button" class="btn btn-danger">删除</button>
                            </span>
                        </li>
                    </ul>
                </div>
                <div id="g-div" style="display: none;">
                    <ul id="g-div-ul" class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">检索</span>
                                </div>
                                <input id="g-search" type="text" class="form-control">
                                <button type="button" class="btn btn-primary">检索</button>
                            </div>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <p>头像</p>
                            <p>tid</p>
                            <p>昵称</p>
                            <span class="badge badge-pill">

                                <button data-toggle="tooltip" data-placement="top" title="API调用开关"
                                        class="btn btn-outline-secondary" disabled>API调用开关</button>

                                <button data-toggle="tooltip" data-placement="top" title="对象监听开关"
                                        class="btn btn-outline-secondary" disabled>对象监听开关</button>

                                <button data-toggle="tooltip" data-placement="top" title="对象被动回复开关"
                                        class="btn btn-outline-secondary" disabled>对象被动回复开关</button>
                            </span>
                        </li>

                        <li v-for="(e,i) in glist"
                            class="list-group-item d-flex justify-content-between align-items-center">
                            <img :src="e.icon" style="width: 45px"
                                 class=" img-thumbnail rounded float-left">
                            {{e.tid}}
                            {{e.name}}
                            <span class="badge badge-pill">

                                <button v-on:click="gm0(e.tid)" type="button"
                                        data-toggle="tooltip" data-placement="top" title="API调用开关"
                                        :class="'btn btn-outline-'+(e.k0?'success':'danger')" v-text="(e.k0?'开':'关')">开/关</button>

                                <button v-on:click="gm1(e.tid)" type="button"
                                        data-toggle="tooltip" data-placement="top" title="对象监听开关"
                                        :class="'btn btn-outline-'+(e.k1?'success':'danger')" v-text="(e.k1?'开':'关')">开/关</button>

                                <button v-on:click="gm2(e.tid)" type="button"
                                        data-toggle="tooltip" data-placement="top" title="对象被动回复开关"

                                        :class="'btn btn-outline-'+(e.k2?'success':'danger')" v-text="(e.k2?'开':'关')">开/关</button>

                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let but1 = $("#b1")
    let but2 = $("#b2")
    let mdiv = $("#m-div")
    let gdiv = $("#g-div")
    but1.click(function () {
        mdiv.show()
        gdiv.hide()
        but2.removeClass("active")
        but1.addClass("active")
    });
    but2.click(function () {
        gdiv.show()
        mdiv.hide()
        but1.removeClass("active")
        but2.addClass("active")
    });
    let vm1 = new Vue({
        el: "#m-div-ul",
        created: function () {
            axios.get("/mlist").then(function (response) {
                vm1.list = response.data;
            }).catch(function (err) {
                alert(err);
            });
        }, data: {
            list: [],
        }, methods: {
            madd: function () {
                let id = $("#m_add_i").val();
                axios.get("/m_add?id=" + id).then(function (response) {
                    if (response.data === true) {
                        vm1.list.splice(0, 0, {"qid": 0, "targetId": id})
                    }
                }).catch(function (err) {
                    alert(err);
                })
            },
            del: function (id) {
                axios.get("/mdel?id=" + id).then(function (response) {
                    axios.get("/mlist").then(function (response) {
                        vm1.list = response.data;
                    }).catch(function (err) {
                        alert(err);
                    });
                }).catch(function (err) {
                    alert(err);
                })
            },
        }
    });
    let vm2 = new Vue({
        el: "#g-div-ul",
        created: function () {
            axios.get("/glist").then(function (response) {
                vm2.glist = response.data
                vm2.oGlist = response.data
            }).catch(function (err) {
                alert(err);
            });
            $(document).ready(function () {
                $("#g-search").change(function () {
                    let s = $("#g-search").val()
                    if (s === "") {
                        vm2.glist = vm2.oGlist
                    } else {
                        vm2.glist = vm2.oGlist.filter((element) => {
                            return (element.tid.toString() + element.name).includes(s)
                        });
                    }
                });
            });
        }, data: {
            glist: [],
            oGlist: [],
        }, methods: {
            gm0: function (tid) {
                axios.get("/gc0?tid=" + tid).then(function (response) {
                    if (response.data === true) {
                        vm2.glist.forEach((e) => {
                            if (e.tid === tid) e.k0 = !e.k0;
                        })
                    }
                }).catch(function (err) {
                    alert(err);
                })
            }, gm1: function (tid) {
                axios.get("/gc1?tid=" + tid).then(function (response) {
                    if (response.data === true) {
                        vm2.glist.forEach((e) => {
                            if (e.tid === tid) e.k1 = !e.k1;
                        })
                    }
                }).catch(function (err) {
                    alert(err);
                })
            }, gm2: function (tid) {
                axios.get("/gc2?tid=" + tid).then(function (response) {
                    if (response.data === true) {
                        vm2.glist.forEach((e) => {
                            if (e.tid === tid) e.k2 = !e.k2;
                        })
                    }
                }).catch(function (err) {
                    alert(err);
                })
            }
        }
    });
</script>
<!--======================================================================-->
<script src="/js/libs/http_cdn.jsdelivr.net_npm_jquery@3.5.1_dist_jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="/js/libs/http_cdn.jsdelivr.net_npm_bootstrap@4.6.2_dist_js_bootstrap.bundle.js"
        crossorigin="anonymous"></script>
</body>
</html>